<body></body>

<script>
  // 1. 每个对象都有两个属性: tag代表标签名称，children既可以是一个数组(代表子节点)，也可以直接是一段文本(代表文本子节点)。
  const obj = {
    tag: 'div',
    children: [
      {
        tag: 'span',
        children: 'hellow world',
      },
    ],
  }

  // 2. 实现 Render 函数：
  const Render = (obj, root) => {
    const el = document.createElement(obj.tag)

    if (typeof obj.children === 'string') {
      const text = document.createTextNode(obj.children)
      el.appendChild(text)
    } else if (obj.children) {
      obj.children.forEach((child) => Render(child, el))
    }

    root.appendChild(el) // 将元素挂载到 root
  }

  // 3. 渲染到 body 上
  Render(obj, document.body)
</script>
